<template>
  <div class="login-container">
    <el-form
      :model="ruleForm2"
      :rules="rules2"
      status-icon
      ref="ruleForm2"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">企业后台管理系统</h3>
      <!-- 用户 -->
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="ruleForm2.username"
          auto-complete="off"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ruleForm2.password"
          auto-complete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item prop="yzm">
        <div class="yzm-inp">
          <el-input
          type="text"
          v-model="ruleForm2.yzm"
          auto-complete="off"
          placeholder="验证码"
        ></el-input>
        </div>
        <div class="yzm-code" @click="makeCode(0, 4);">
          <yzm :identifyCode="identifyCode" />
        </div>
      </el-form-item>
      <!--  -->
      <!-- <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox> -->
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%"
          @click="handleSubmit"
          :loading="logining"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import yzm from "../components/yzm";

export default {
  data() {
    var checkCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        setTimeout(() => {
          if (!/^[0-9]+$/.test(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value+''.length==4) {
              callback(new Error('验证码只有四位数'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
    return {
      identifyCodes: "1234567890",
      identifyCode:"",
      logining: false,

      ruleForm2: {
        username: "",
        password: "",
         yzm:"",
      },
      rules2: {
        username: [
          {required: true,message: "请输入账号", trigger: "blur", },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        yzm:[
          {validator:checkCode,trigger:"blur"}
        ]
      },
      checked: false,
      log:false
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  created(){
    
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      this.identifyCode = "";
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
  },
  async handleSubmit() {
      console.log(this.ruleForm2)
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.logining = true;
        
          // if (this.ruleForm2.yzm==this.identifyCode) {
            
            this.$axios.get("/index.php/admin/login/login",{params:{
              admin_name:this.ruleForm2.username,
              password:this.ruleForm2.password
            
            }}).then(res=>{
              if (res.data.code==200) {
                console.log(res)
               localStorage.setItem("mytoken",res.data.data.token)
                this.$router.push({ path: "/main" });
                
              }else{
                this.logining = false;
               this.$message({
                  type: 'info',
                  message:"密码错误"
                });
              
              }

            })
            
            // localStorage.setItem("userLogin",this.ruleForm2.username)

            
            
        
            this.logining = false
            // } else {
            //   this.logining = false;
            //    this.$message({
            //       type: 'info',
            //       message:"验证码错误"
            //     });	
            // }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
  },
  components:{
    yzm
  }
}
</script>

<style scoped>
.title{
text-align: center;
line-height: 45px;
}
.login-container {
  width: 100%;
  height: 100%;
  background-color: #242f42;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  /* margin: auto; */
  width: 350px;
  height: 300px;
  padding: 25px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 10px #cac6c6;
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 190px);
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
.yzm-inp{
width:220px;
float: left;
}
.yzm-code{
  height: 40px;
  width: 110px;
  float: right;
}
</style>
